CSS实现圆圈内含有文字并居中【实例】

在浏览网站时，我们经常看到使用包含文本的圆圈，这个要怎样实现呢？其实，只需要一点CSS技巧，就能实现这个效果。本文将介绍如何用CSS实现带有文本的圆圈。

demodownload

CSS

HTML

我们看到，代码很简单，实现方法是作一个实心圆的div，而div里的内容便是实心圆里的文字，我们只需用CSS调整文字的位置居中即可。

这个实例涉及两个知识点，一个是如何画一个实心圆，二是如何让文字居中。

首先，实心圆的CSS很简单，如下：

关键代码是设置border-radius的属性值为50%。background是设置实心圆的颜色。width和height是实心圆的直径。

下面是文字的定位设置：

justify-content是水平布局，与之对应的是垂直布局align-item，text-align是水平居中，display: flex;是弹性布局，该属性可以让文字垂直居中。

至此，CSS实现文字在圆圈内就完成了。

本文介绍了如何使用CSS实现文字在圆圈内并居中，通过本文的学习，我们应该了解到CSS如何作圆，以及文字的布局设置、定位等相关知识。

相关文章